<template>
  <div class="checkPlan_box">
    <div class="checkPlan_top">
      <div class="checkPlan_title">产能统计</div>
    </div>

    <div v-if="tableData" class="echarts_container">
      <div id="map6" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { products } from '@/api/system/largeScreen'
import { mapGetters } from 'vuex'
export default {
  props: {
    targetNumber: {
      type: Number,
      default: 100
    }
  },
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      tableData: {},
      allData: [],
      searchDateNumber: 0,
      targetValueArr: [],
      myChart: undefined,
      timer: undefined
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.searchDateNumber == this.allData.length - 1) {
        this.searchDateNumber = 0
        this.getProducts()
      } else {
        this.searchDateNumber++
      }
      this.tableData = this.allData[this.searchDateNumber]
      this.targetValueArr = []
      for (let i = 0; i < this.tableData.data.length; i++) {
        this.targetValueArr.push(this.targetNumber)
      }
      this.$nextTick(() => {
        this.drawLine()
      })
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  created() {
    this.getProducts()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getProducts() {
      products({ companyId: this.$store.state.user.companyId }).then(res => {
        this.allData = res.data
        this.tableData = this.allData[this.searchDateNumber]
        this.targetValueArr = []
        for (let i = 0; i < this.tableData.data.length; i++) {
          this.targetValueArr.push(this.targetNumber)
        }
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('map6')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('map6'))
      this.myChart.setOption({
        legend: {
          data: ['目标值', this.tableData.name],
          top: '0%',
          right: '2%',
          itemGap: 50,
          textStyle: {
            color: '#000000',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '8%',
          top: '17%',
          right: '3%',
          bottom: '12%'
        },
        xAxis: {
          data: this.tableData.data.map(item => item.executeData),
          axisLine: {
            show: false // 隐藏X轴轴线
            // lineStyle: {
            //   color: '#999999'
            // }
          },
          axisTick: {
            show: false, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666', // X轴文字颜色
              fontSize: 14
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#666666',
              fontSize: 14
            },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     color: 'rgba(153, 153, 153, 0.5)'
            //   }
            // },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false, // 隐藏X轴轴线
              lineStyle: {
                color: '#999999'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666666',
                fontSize: 14
              }
            }
          },
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 16
            },
            axisTick: {
              show: false
            },
            // splitLine: {
            //   show: false,
            //   lineStyle: {
            //     color: 'rgba(153, 153, 153, 0.5)'
            //   }
            // },
            axisLine: {
              show: false, // 隐藏X轴轴线
              lineStyle: {
                color: '#666666',
                width: 2
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#797A7F',
                fontSize: 14
              }
            }
          }
        ],
        series: [
          {
            name: this.tableData.name,
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: 'rgba(107, 189, 255, 1)',
                barBorderRadius: [20, 20, 0, 0]
                // shadowColor: 'rgba(0, 0, 0, 0.3)',
                // shadowOffsetX: 2, // 折线的X偏移
                // shadowOffsetY: 0, // 折线的Y偏移
                // shadowBlur: 6 // 折线模糊
              }
            },
            data: this.tableData.data.map(item => item.products)
          },
          {
            name: '目标值',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            data: this.targetValueArr, // 背景阴影长度
            itemStyle: {
              normal: {
                color: 'rgba(107, 189, 255,0.4)',
                barBorderRadius: [20, 20, 0, 0]
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.checkPlan_box{
  width: 100%;
  height: calc(100% - 50px);
}
.checkPlan_top {
  display: flex;
  justify-content: space-between;

  .checkPlan_title {
    font-size: 20px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }

  .checkPlan_month{
    padding-top: 16px;
    padding-right: 20px;
  }
}
</style>
